<!-- 气象五参数监测一览 -->
<template>

    <div class="body" style="text-align: center">
        <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
            <div class="header"><div>本地气象检测一览</div></div>
            <div class="content">
                <div class="con">
                    <i v-if="32>1"
                            class="
                                    el-icon-location"
                            style="transform: scale(4.5); color: #ff7d34"
                    ></i>

                </div>
                <div class="cont">
                    <span>{{lives.weather}}</span>
                    <span>{{ lives.temperature }}℃</span>
                </div>
            </div>
            <div class="footcard">
                <el-card class="fcard" shadow="hover" :body-style="{ padding: '0px' }">
                    <i
                            class="el-icon-wind-power"
                            style="transform: scale(2); color: #4087e8"
                    ></i>
                    <div>风力级别</div>
                    <div>{{ lives.windpower }}m/s</div>
                </el-card>
                <el-card
                        class="fcard"
                        shadow="hover"
                        :body-style="{ padding: '0px' }"
                ><i
                        class="el-icon-partly-cloudy"
                        style="transform: scale(2); color: #4087e8"
                ></i>
                    <div>风向</div>
                    <div>{{lives.winddirection}}°</div></el-card>
                <el-card
                        class="fcard"
                        shadow="hover"
                        :body-style="{ padding: '0px' }"
                ><i
                        class="el-icon-heavy-rain"
                        style="transform: scale(2); color: #4087e8"
                ></i>
                    <div>湿度</div>
                    <div>{{lives.humidity}}%</div></el-card>
                <el-card
                        class="fcard"
                        shadow="hover"
                        :body-style="{ padding: '0px' }"
                ><i
                        class="el-icon-odometer"
                        style="transform: scale(2); color: #4087e8"
                ></i>
                    <div>发布时间</div>
                    <div>{{ lives.reporttime }}</div></el-card>
            </div>
        </el-card>

    </div>

</template>

<script>
    import {request} from '@/axios/request'
    export default {
        data(){
            return{
                lives:null
            }
        },
        methods:{
            getWeather(){
                request({
                    url:'/weather',
                    method:'get'
                }).then(res=>{
                    this.lives = res.data.object.lives[0]
                    console.log(this.lives)
                })
            }
        },
        created(){
            // 此处封装api为本文开头的API服务器地址
            this.getWeather();
        }

    };
</script>

<style lang="less" scoped>
    .body {
        width: 100%;
        height: 100%;
        padding-top: 20px;
    }
    .box-card {
        height: 298px;
        padding: 0px 20px;
    }
    .header {
        font-weight: 600;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid #97cbff;
    }
    .content {
        height: 125px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center; /* 垂直居中 */
        border-bottom: 2px solid #e1f0ff;
        .con {
            width: 77px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center; /* 垂直居中 */
        }
        .cont {
            width: 110px;
            height: 70px;
            display: flex;
            flex-flow: column; // 纵向布局
            text-align: left;
            span:nth-child(1) {
                font-size: 20px;
            }
            span:nth-child(2) {
                font-size: 30px;
            }
        }
    }
    .footcard {
        height: 130px;
        // width: 285px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .fcard {
            div:nth-child(2){
                font-size: 10px;
                margin: 5px;
            }
            width: 120px;
            height: 100px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
        }
    }
</style>
